<template>
	<view style="padding-bottom: 150rpx;">
		<u-navbar :border-bottom='false' back-icon-size='48' title="订单填写"></u-navbar>
		<view class="header">
			<view class="title">
				{{$store.state.travelInfo.title}}
			</view>
			<view class="date">
				{{tripTime}} 出发
			</view>
		</view>
		<view class="pfang" v-if="!showFc">
			<view class="pfang-li">
				拼房
			</view>
			<view class="pfang-li">
				<text>同意拼房</text>
				<u-switch size='30' v-model="poorChecked"></u-switch>
			</view>
			<view class="pfang-li">
				<text>房差</text><text>{{poorChecked?'0':$store.state.travelInfo.house_diff_price}}</text>
			</view>
		</view>
		<view class="linkman">
			<view class="text">
				联系人信息
			</view>
			<view class="phoneNum" v-if="contact">
				<view class="name">
					{{contact.link_name}}
				</view>
				<view class="text1">
					<text>+86</text>
					<u-icon name="arrow-down" color="#3587F7" size="24"></u-icon>
				</view>
				<view class="num">
					{{contact.link_tel}}
				</view>
				<view class="editIcon" @click="navTo('../linkMan/linkMan?id='+contact.link_id)">
					<u-icon name="edit-pen" color="#3587F7" size="36"></u-icon>
				</view>
			</view>
			<view class="morePeo" @click="navTo('../linkMan/linkMan')" v-else>
				<u-icon name="plus-circle" color="#3587F7" size="36"></u-icon><text
					style="margin-left: 10rpx;">添加联系人</text>
			</view>
		</view>
		<view class="travelMan">
			<view class="lable">
				<text>出行人</text>
				<view class="tip">
					(请选择<text style="color: #F57426;">{{adultNum}}</text>位出行人)
				</view>
			</view>
			<view class="travelMan-ul">
				<view class="travelMan-li" v-for="(item,index) in peopleList" :key='index'
					v-if="item.checked && item.age > 17">
					<view class="left">
						<view class="name">
							<text class="nametext">{{item.id_name}}</text>
						</view>
						<view class="idNum">
							身份证 {{item.id_number}}
						</view>
					</view>
					<view class="right">
						<u-icon name="edit-pen" color="#3587F7" size="36"></u-icon>
					</view>
				</view>
			</view>

			<view class="morePeo" @click="navTo('../traveller/traveller?adultNum='+adultNum)" v-if="peopleList.length">
				<u-icon name="plus-circle" color="#3587F7" size="36"></u-icon> <text
					style="margin-left: 10rpx;">选择出行人</text>
			</view>
			<view class="morePeo" @click="navTo('../traveller/traveller?adultNum='+adultNum)" v-else>
				<u-icon name="plus-circle" color="#3587F7" size="36"></u-icon> <text
					style="margin-left: 10rpx;">添加出行人</text>
			</view>
		</view>
		<view class="travelMan" v-if="childNum>0">
			<view class="lable">
				<text>随行儿童</text>
				<view class="tip">
					(请选择<text style="color: #F57426;">{{childNum}}</text>位儿童)
				</view>
			</view>
			<view class="travelMan-ul">
				<view class="travelMan-li" v-for="(item,index) in childList" :key='index'
					v-if="item.checked && item.age < 18">
					<view class="left">
						<view class="name">
							<text class="nametext">{{item.id_name}}</text>
						</view>
						<view class="idNum">
							身份证 {{item.id_number}}
						</view>
					</view>
					<view class="right">
						<u-icon name="edit-pen" color="#3587F7" size="36"></u-icon>
					</view>
				</view>
			</view>

			<view class="morePeo" @click="navTo('../traveller/traveller?childNum='+childNum)" v-if="peopleList.length">
				<u-icon name="plus-circle" color="#3587F7" size="36"></u-icon> <text
					style="margin-left: 10rpx;">选择出行人</text>
			</view>
			<view class="morePeo" @click="navTo('../traveller/traveller?childNum='+childNum)" v-else>
				<u-icon name="plus-circle" color="#3587F7" size="36"></u-icon> <text
					style="margin-left: 10rpx;">添加出行人</text>
			</view>
		</view>
		<!-- 	<view class="insure">
			<view class="title">
				旅行无忧 安心出行
			</view>
			<view class="insure-ul">
				<view class="insure-li">
					<view class="left">
						<view class="name">
							<text>航意险</text>/众安国内长线旅行险A款
						</view>
						<view class="tip">
							<view class="tip-li">
								1万意外医疗
							</view>
							<view class="tip-li">
								保14项
							</view>
						</view>
					</view>
					<view class="right">
						<view class="price">
							¥9.2/人
						</view>
						<u-checkbox v-model="checked" shape="circle"></u-checkbox>
					</view>
				</view>
				<view class="insure-li">
					<view class="left">
						<view class="name">
							<text>航意险</text>/众安国内长线旅行险A款
						</view>
						<view class="tip">
							<view class="tip-li">
								1万意外医疗
							</view>
							<view class="tip-li">
								保14项
							</view>
						</view>
					</view>
					<view class="right">
						<view class="price">
							¥9.2/人
						</view>
						<u-checkbox v-model="checked" shape="circle"></u-checkbox>
					</view>
				</view>
			</view>
		</view> -->
		<view class="discou">
			<view class="lable">
				<view class="lableText">优惠方式</view>
			</view>
			<view class="discou-ul">
				<view class="discou-li">
<!--					<view class="type">-->
<!--						<text>旅游基金（可用{{travel_found}}）</text>-->
<!--						<u-checkbox v-model="tripFund" :disabled="travel_found <= 0 ? true:false" shape="circle" size='28'></u-checkbox>-->
<!--					</view>-->
					<view class="type">
						<text>福利金（可用{{welfare_fund}}）</text>
						<u-checkbox v-model="welFund" :disabled="welfare_fund > 0 ? false:true" shape="circle" ref="welFundRefs" size='28'></u-checkbox>
					</view>
				</view>
			</view>
		</view>
		<view class="remark">
			<view class="lable">
				特殊要求
			</view>
			<input type="text" value="" placeholder="在此输入您的特殊要求" placeholder-style="font-size:28rpx;color:#999999"
				v-model="userNote" />
		</view>
		<view class="urgen">
			<view class="title">
				<text>添加紧急联系人</text>
				<u-switch size='30' v-model="emerChecked"></u-switch>
			</view>
			<view class="linkman-info" v-if="emerChecked">
				<view class="linkman-infoBox">
					<view class="lable" style="display: flex;align-items: center;">
						<text>手机号</text><text style="margin-left: 20rpx;">+86</text>
						<u-icon style="margin-left: 4rpx;" name="arrow-down" color="#3587F7" size="24"></u-icon>
					</view>
					<input class="input" type="text" v-model="emerMobile" placeholder="填写手机号"
						placeholder-style="font-size:28rpx;color:#999999" />
				</view>
				<view class="linkman-infoBox" style="border-bottom: none;">
					<view class="lable">
						姓名
					</view>
					<input class="input" type="text" v-model="emerName" placeholder="填写姓名"
						placeholder-style="font-size:28rpx;color:#999999" />
				</view>
			</view>
		</view>
		<view class="treaty">
			<u-checkbox v-model="agreeChecked" shape="circle" size="28"></u-checkbox>
			<text>我已阅读并接受</text>
			<text class="text">《<text @click="navTo('./pact')">合同条款</text>,<text style="margin: 0 6rpx;" @click="navTo('./text')">补充条款</text>等其它内容》</text>
		</view>
		<view class="payBox">
			<view class="totalPrice">
				总价<text style="color: #3587F7;margin-left: 8rpx;">¥</text><text class="price">{{total}}</text>
			</view>
<!--			<view class="detailPrice" @click="showDetail=true">-->
<!--				费用明细-->
<!--			</view>-->
			<view class="payBtn" @click="toPayment">
				下一步
			</view>
		</view>
		<!-- 费用明细 -->
<!--		<u-popup v-model="showDetail" mode="bottom" :closeable='true' border-radius='16'>-->
<!--			<view class="detailPop">-->
<!--				<view class="title">-->
<!--					费用明细-->
<!--				</view>-->
<!--				<view class="det-li">-->
<!--					<view class="tit">-->
<!--						成人-->
<!--					</view>-->
<!--					<view class="num">-->
<!--						<text class="price">{{price}}</text> <text>x{{adultNum}}</text>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="det-li" v-if="childNum != 0">-->
<!--					<view class="tit">-->
<!--						儿童-->
<!--					</view>-->
<!--					<view class="num">-->
<!--						<text class="price">{{childPrice}}</text> <text>x{{childNum}}</text>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="det-li" v-if="!poorChecked && !showFc">-->
<!--					<view class="tit">-->
<!--						房差-->
<!--					</view>-->
<!--					<view class="num">-->
<!--						<text class="price">{{Number($store.state.travelInfo.house_diff_price).toFixed(0)}}</text>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="det-li" v-if="tripFund">-->
<!--					<view class="tit">-->
<!--						旅游基金-->
<!--					</view>-->
<!--					<view class="num">-->
<!--						<text class="price">-{{travel_found_use}}</text>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="det-li" v-if="welFund">-->
<!--					<view class="tit">-->
<!--						福利金-->
<!--					</view>-->
<!--					<view class="num">-->
<!--						<text class="price">-{{this.diswelfareFund * this.adultNum}}</text><text-->
<!--							style="color: #333333;">x{{adultNum}}</text>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="det-li" v-if="$store.state.travelInfo.service_tips > 0">-->
<!--					<view class="tit">-->
<!--						综合服务费-->
<!--					</view>-->
<!--					<view class="num">-->
<!--						<text class="price">{{Number($store.state.travelInfo.service_tips).toFixed(0)}}</text>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
<!--		</u-popup>-->

<!--		<u-popup v-model="showPay" mode="bottom" :closeable='true' border-radius='16'>-->
<!--			<view class="payPop">-->
<!--				<view class="title">-->
<!--					选择支付方式-->
<!--				</view>-->
<!--				<view class="pay-ul">-->
<!--					<view class="pay-li">-->
<!--						<view class="pay-li-left">-->
<!--							<image src="../../../../static/imgs/weixinzf.png" mode=""></image>-->
<!--							<text>微信</text>-->
<!--						</view>-->
<!--						<u-checkbox v-model="weiPaycheck" shape="circle" @change="weiChange" size="30"></u-checkbox>-->
<!--					</view>-->
<!--					<view class="pay-li">-->
<!--						<view class="pay-li-left">-->
<!--							<image src="../../../../static/imgs/zhifubaozf.png" mode=""></image>-->
<!--							<text>支付宝</text>-->
<!--						</view>-->
<!--						<u-checkbox v-model="alPaycheck" shape="circle" @change="aliChange" size="30"></u-checkbox>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="pay" @click="confirmPay">-->
<!--					支付-->
<!--				</view>-->
<!--			</view>-->
<!--		</u-popup>-->
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				weiPaycheck: false, // 微信支付
				alPaycheck: false, // 支付宝支付
				showDetail: false,
				tripFund: false,
				welFund: false,
				//totalPrice: 0,
				poorChecked: true, // 房差
				agreeChecked: false,
				emerName: '', // 紧急联系人姓名
				emerMobile: '', // 紧急联系手机
				emerChecked: false, // 紧急联系人
				adultNum: 0,
				childNum: 0,
				tripTime: '', // 出行时间
				checked: false,
				showPay: false,
				contact: '', //联系人
				peopleList: [], // 出行人
				travel_found: 0, // 旅游基金
				welfare_fund: 0, // 福利金
				welfare_fund_y: 0, // 福利金-本金
				userNote: '', // 用户备注
				childPrice: 0, // 儿童价
				price: 0,
				vip_price: 0,
				childList: [], // 出行儿童
				payId: '', // 支付id
				orderId: '', // 订单id
				payCode: '',
				showFc: false,
				diswelfareFund: 0, //抵扣福礼金(最高可用)
				info: '',
				poor: 0,
				distravelFound: 0,
        travel_found_use:0, //使用旅游基金数量
        welfare_fund_use:0, //使用福利金额
        service_tips:0,
        item:{},
        dayItem:{},
        user_level:'0'
			}
		},
		onLoad(option) {
			this.tripTime = option.tripTime
			this.adultNum = option.adultNum
			this.childNum = option.childNum
			this.childPrice = Number(option.childPrice)
			this.price = Number(option.price)
			this.vip_price = Number(option.vip_price)
			this.diswelfareFund = this.$store.state.travelInfo.use_welfare_fund
			this.service_tips = Number(this.$store.state.travelInfo.service_tips)
      this.item = this.$store.state.travelInfo
      //this.dayItem = this.$store.state.travelDayInfo
      //TODO 确认总人数金额，儿童金额，可抵扣福利金金额，持有福利金，旅游基金
      // console.log(this.item)
      // console.log(this.dayItem)

			// this.totalPrice = this.price * this.adultNum + this.childPrice * this.childNum + Number(this.$store.state
			// 	.travelInfo.service_tips)
			// 判断是否产生房差
			if (this.adultNum % 2 == 0) {
				this.showFc = true
			} else {
				this.showFc = false
			}
			if (!this.poorChecked && !this.showFc) {
			  this.poor = Number(this.$store.state.travelInfo.house_diff_price)
        //console.log(this.poor)
				//this.totalPrice = this.totalPrice + Number(this.$store.state.travelInfo.house_diff_price)
			}
		},
		onShow() {
			let linkMan = this.$store.state.linkMan
			if (linkMan.link_id) {
				this.contact = linkMan
			} else {
				this.getContact()
			}
			this.peopleList = this.$store.state.tripMan
			this.childList = this.$store.state.tripChild
      //console.log(this.childList)
			this.getInfo()
		},
		methods: {
			// 获取用户等级
			// async getInfo() {
			// 	let res = await myRequest.getUserInfo()
      //
			// 	if (res.status) {
			// 		this.info = res.data
			// 		this.$store.commit('changeInfo', res.data) // 保存用户信息
			// 	}
      //
			// },
			// 确认支付
			confirmPay() {
				uni.navigateTo({
					url: '../../pay/pay?payCode=' + this.payCode + '&payId=' + this.payId
				})
			},
			weiChange(e) {
				if (e.value) {
					this.alPaycheck = false
					this.payCode = '6004'
				}
			},
			aliChange(e) {
				if (e.value) {
					this.weiPaycheck = false
					this.payCode = '6005'
				}
			},
			async toPayment() {
				if (this.info.province) {
					uni.showModal({
						content: '暂未设置归属地,是否前往设置?',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '../../../mine/editInfo/editInfo'
								})
							}
						}
					})
					return
				}
				// 处理儿童id
				let {
          agreeChecked,
          contact,
          peopleList,
          childList,
          childNum,
          adultNum,
          userNote,
          emerMobile,
          emerName,
          poorChecked,
          travel_found_use,
          welfare_fund_use,
          total,
          childPrice,
          service_tips
				} = this
				if (!agreeChecked) {
					uni.showToast({
						title: '请阅读并接受相关协议',
						icon: 'none'
					})
					return
				}
				if (!contact) {
					uni.showToast({
						title: '请填写联系人',
						icon: 'none'
					})
					return
				}
				if (peopleList.length == 0) {
					uni.showToast({
						title: '请添加出行人',
						icon: 'none'
					})
					return
				}
				if (childNum > 0 && childList.length == 0) {
					uni.showToast({
						title: '请添加随行儿童',
						icon: 'none'
					})
					return
				}
				// 处理出行人和抵扣
				let tripId = []
				peopleList.forEach(peo => {
					if (peo.checked) {
						let isWel = ''
						if (this.welFund) {
							isWel = '1'
						} else {
							isWel = '0'
						}
						let isTrip = ''
						if (this.tripFund) {
							isTrip = '1'
						} else {
							isTrip = '0'
						}
						let obj = {
							id: peo.id,
							isWel: isWel,
							isTrip: isTrip
						}
						tripId.push(obj)
					}
				})
        let cldId = ''
        if(childList.length > 0){
          childList.forEach(cpeo => {
            if(cpeo.checked){
              cldId += cld.id + ','
              let cobj = {
                id: cpeo.id,
                isWel: 0,
                isTrip: 0
              }
              tripId.push(cobj)
            }
          })
        }
        const allNum = Number(adultNum) + Number(childNum)
				if (tripId.length != allNum) {
					uni.showToast({
						title: '出行人未添加完整',
						icon: 'none'
					})
					return
				}
				let deduct = ''
				tripId.forEach(item => {
					let str = item.id + ',' + item.isTrip + ',' + item.isWel
					deduct += str + ';'
				})
				let deduct_from = deduct.substring(0, deduct.lastIndexOf(';'))

        if(cldId !== ''){
          let childId = cldId.substring(0, cldId.lastIndexOf(','))
        }
				let istf = ''
				if (poorChecked) {
					istf = '1'
				} else {
					istf = '2'
				}
				const payItem = {
          	id: this.$store.state.travelInfo.id,
          	start_date: this.tripTime,
          	link_id: contact.link_id,
          	deduct_from: deduct_from,
          	emergency_contact_name: emerName,
          	emergency_contact_tel: emerMobile,
          	user_note: userNote,
          	//bed_people_id: childId,
          	is_shared_house: istf,
            travel_found_use:travel_found_use,
            pay_welfare_fund:welfare_fund_use,
            pay_cash:total,
            fc_price:this.poor,
            vip_price:this.vip_price,
            price:this.price,
            adultNum:this.adultNum,
            childNum:this.childNum,
            childPrice:childPrice,
            service_tips:service_tips
        }
        this.$store.commit('changeOrderItem',payItem)

        uni.navigateTo({
                         url: './payment'
                       })

				// let res = await myRequest.addtripOrder({
				// 	id: this.$store.state.travelInfo.id,
				// 	start_date: this.tripTime,
				// 	link_id: contact.link_id,
				// 	deduct_from: deduct_from,
				// 	emergency_contact_name: emerName,
				// 	emergency_contact_tel: emerMobile,
				// 	user_note: userNote,
				// 	//bed_people_id: childId,
				// 	is_shared_house: istf,
        //   travel_found_use:travel_found_use,
        //   pay_welfare_fund:welfare_fund_use,
        //   pay_cash:total
				// })

				// if (res.status) {
				// 	uni.showToast({
				// 		title: '发团成功'
				// 	})
        //   this.$store.commit('changeChild', [])
				// 	this.payId = res.pay_id
				// 	this.orderId = res.orderId
        //   if(this.payId == 0){
        //     setTimeout(()=>{
        //       uni.navigateTo({
        //                        url: '../../../mine/orderCenter/travel/travel'
        //                      })
        //     },2000)
        //   }else{
        //     this.showPay = true
        //   }
				// }
			},
			// 获取福利金和旅游基金
			async getInfo() {
				let res = await myRequest.getUserInfo()
        //console.log(res)
				if (res.status) {
					this.travel_found = Number(res.data.travel_found)
					this.welfare_fund = Number(res.data.welfare_fund)
					this.welfare_fund_y = Number(res.data.welfare_fund)
					this.user_level = Number(res.data.user_level)
				}
			},
			// 获取联系人
			async getContact() {
				let res = await myRequest.getMycontacts({
					page: '1'
				})
				if (res.status) {
					this.contact = res.data[0]
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
    computed:{
		  totalPrice(){

        let price = Number(this.price)

        const poPrice = price * this.adultNum
        //儿童人数*儿童金额（默认不加床）
        const chPrice = Number(this.childPrice) * this.childNum
        return poPrice + chPrice + this.service_tips + this.poor
      },
		  //应付金额
      total(){
        return this.totalPrice - this.welfare_fund_use - this.travel_found_use
      }
    },
    watch:{
      welFund(val){
        const disNum = this.adultNum * this.diswelfareFund
        if(val){
          if(disNum > this.welfare_fund_y){

            this.welfare_fund_use = this.welfare_fund_y
            this.welfare_fund = 0
          }else{
            this.welfare_fund_use = disNum
            this.welfare_fund = this.welfare_fund_y - disNum
            //实付
            if(this.travel_found_use > 0 ){
              //已勾选旅游基金
              if(this.travel_found_use + disNum > this.totalPrice){
                this.travel_found_use = this.travel_found_use > disNum ? this.travel_found_use - disNum:0
              }

            }
          }

        }else{
          this.welfare_fund_use = 0
          this.welfare_fund = this.welfare_fund_y
          if(this.travel_found_use > 0){
            if(this.travel_found_use + disNum < this.travel_found){
              this.travel_found_use += disNum
            }
          }
        }
      },
      tripFund(val){
        if(val){
          if(this.total > this.travel_found){
            //当前应付金额大于总旅游基金
            this.travel_found_use = this.travel_found
          }else{
            this.travel_found_use = this.total
          }
        }else{
          this.travel_found_use = 0
        }
      },
      poorChecked(val) {
        this.poor =  val ? 0 : Number(this.$store.state.travelInfo.house_diff_price)
        if(val){
          //同意拼房
          if(this.total < 0 && this.travel_found_use > 0){
            if(this.travel_found < this.travel_found_use + this.total){
              this.travel_found_use = this.travel_found
            }else{
              this.travel_found_use += this.total
            }
          }
        }else{
          //不同意拼房
          if(this.total > 0 && this.travel_found_use > 0){
            // console.log(this.travel_found_use)
            // console.log(this.total)
            const cNum = this.total + this.travel_found_use
            if(cNum > this.travel_found_use){
              this.travel_found_use = this.travel_found
            }else{
              this.travel_found_use = cNum
            }
          }
        }
      }
    }
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		padding-left: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;

		.title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #333333;
		}

		.date {
			margin-top: 14rpx;
			padding-left: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}

	.pfang {
		width: 710rpx;
		height: auto;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto 0;

		.pfang-li {
			width: 100%;
			height: 88rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&:nth-child(1) {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #333333;
			}

			&:nth-child(2) {
				border-bottom: 2rpx solid #F2F2F2;
			}
		}
	}

	.linkman {
		width: 710rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 32rpx auto 0;
		padding: 0 20rpx 20rpx;

		.text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #333333;
			height: 80rpx;
			line-height: 66rpx;
			padding-top: 12rpx;
		}

		.phoneNum {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333;

			.editIcon {
				margin-left: auto;
			}

			.name {
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
				margin-right: 20rpx;
			}

			.num {
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 600;
				color: #333333;
				margin-left: 20rpx;
			}
		}

		.morePeo {
			width: 650rpx;
			height: 66rpx;
			background: #F2F2F7;
			border-radius: 8rpx;
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #3587F7;
			text-align: center;
			line-height: 66rpx;
		}
	}

	.travelMan {
		width: 710rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto 0;
		padding: 0 20rpx 20rpx;

		.lable {
			width: 100%;
			height: 66rpx;
			line-height: 66rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #333333;
			display: flex;
			align-items: center;
			padding-top: 22rpx;

			.tip {
				margin-left: 10rpx;
				font-size: 28rpx;
				color: #999999;
			}
		}

		.travelMan-li {
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #F2F2F2;

			.left {
				.name {
					.nametext {
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #333333;
					}

					.tratext {
						margin-left: 6rpx;
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #666666;
					}
				}

				.idNum {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #999999;
					margin-top: 4rpx;
				}
			}

			&:last-child {
				border-bottom: none
			}
		}

		.morePeo {
			width: 650rpx;
			height: 66rpx;
			background: #F2F2F7;
			border-radius: 8rpx;
			font-size: 28rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #3587F7;
			text-align: center;
			line-height: 66rpx;
			margin-top: 20rpx;
		}
	}

	// .insure {
	// 	width: 710rpx;
	// 	height: auto;
	// 	background: #FFFFFF;
	// 	border-radius: 16rpx;
	// 	margin: 20rpx auto 0;

	// 	.title {
	// 		width: 100%;
	// 		height: 110rpx;
	// 		@include bgi('../../../../static/imgs/lvyioubx.png');
	// 		font-size: 28rpx;
	// 		font-family: Segoe UI;
	// 		font-weight: 400;
	// 		color: #F57426;
	// 		line-height: 88rpx;
	// 		padding-left: 60rpx;
	// 	}

	// 	.insure-ul {
	// 		padding: 0 20rpx;

	// 		.insure-li {
	// 			width: 100%;
	// 			height: 140rpx;
	// 			display: flex;
	// 			align-items: center;
	// 			justify-content: space-between;
	// 			border-bottom: 2rpx solid #F2F2F2;

	// 			.left {
	// 				.name {
	// 					font-size: 28rpx;
	// 					font-family: PingFang SC;
	// 					font-weight: 400;
	// 					color: #333333;

	// 					text {
	// 						font-weight: bold;
	// 					}
	// 				}

	// 				.tip {
	// 					margin-top: 12rpx;
	// 					display: flex;

	// 					.tip-li {
	// 						margin-right: 10rpx;
	// 						width: fit-content;
	// 						width: -webkit-fit-content;
	// 						width: -moz-fit-content;
	// 						height: 36rpx;
	// 						background-color: #F2F2F7;
	// 						font-size: 20rpx;
	// 						font-family: PingFang SC;
	// 						font-weight: 400;
	// 						line-height: 36rpx;
	// 						color: #999999;
	// 						padding: 0 4rpx;
	// 					}
	// 				}
	// 			}

	// 			.right {
	// 				display: flex;
	// 				align-items: center;

	// 				.price {
	// 					font-size: 28rpx;
	// 					font-family: Segoe UI;
	// 					font-weight: 400;
	// 					color: #333333;
	// 					margin-right: 12rpx;
	// 				}
	// 			}
	// 		}
	// 	}
	// }

	.discou {
		width: 710rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto;

		.lable {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;

			.lableText {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #333333;
			}

			.dikou {
				display: flex;
				align-items: center;

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-right: 10rpx;
				}
			}
		}

		.discou-ul {
			pading: 0 20rpx;

			.discou-li {
				height: 100rpx;
				border-bottom: 2rpx solid #F2F2F2;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				justify-content: space-between;

				.name {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;
				}

				.type {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}

			.more {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}

	.remark {
		width: 710rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		padding: 0 20rpx 10rpx;

		.lable {
			width: 100%;
			height: 88rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			line-height: 88rpx;
			color: #333333;
		}

		input {
			width: 694rpx;
			height: 88rpx;
			border-bottom: 2rpx solid #F2F2F2;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.urgen {
		width: 710rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto 0;
		padding: 0 20rpx;

		.title {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.linkman-info {
			background-color: #FFFFFF;

			.linkman-infoBox {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F2F2F2;

				.lable {
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;
				}

				.input {
					width: 65%;
					height: 100%;
					border-bottom: 2rpx solid #F2F2F2;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}

	.treaty {
		margin-top: 30rpx;
		padding-left: 32rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;

		.text {
			color: #3587F7;
		}
	}

	.payBox {
		width: 100%;
		height: 116rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		z-index: 100;
		display: flex;
		align-items: center;
		padding-left: 42rpx;
		padding-right: 20rpx;

		.totalPrice {
			font-size: 24rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333;
      width:60%;
			.price {
				font-size: 44rpx;
				font-family: Segoe UI;
				font-weight: bold;
				color: #3587F7;
			}
		}

		.detailPrice {
			font-size: 24rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333;
			//margin-left: 172rpx;
      width:20%;
		}

		.payBtn {
			margin-left: auto;
			width: 232rpx;
			height: 80rpx;
			background: linear-gradient(126deg, #F5B053 0%, #F8912C 100%);
			border-radius: 8rpx;
			font-size: 32rpx;
			font-family: Segoe UI;
			font-weight: 400;
			line-height: 80rpx;
			text-align: center;
			color: #FFFFFF;
		}
	}

	.payPop {
		padding-bottom: 20rpx;

		.title {
			width: 375px;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}

		.pay-ul {

			.pay-li {
				width: 694rpx;
				height: 100rpx;
				background: #FFFFFF;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.pay-li-left {
					display: flex;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
					}

					text {
						font-size: 32rpx;
						font-family: Alibaba Sans;
						font-weight: 400;
						color: #333333;
						margin-left: 20rpx;
					}
				}

			}
		}

		.pay {
			width: 694rpx;
			height: 88rpx;
			background: linear-gradient(56deg, #FEA837 0%, #FF7700 100%);
			margin: 0 auto;
			border-radius: 8rpx;
			font-size: 40rpx;
			font-family: Arial;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin-top: 40rpx;
		}
	}

	.detailPop {
		padding: 0 20rpx;

		.title {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
		}

		.det-li {
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.num {
				.price {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #3587F7;
					margin-right: 8rpx;
				}
			}
		}
	}

	/deep/ .u-checkbox__label {
		margin-right: 0rpx !important;
	}
</style>
